<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import TileLayer from 'ol/layer/Tile.js'
import XYZ from 'ol/source/XYZ.js'

// 地图引用
const mapRef = ref(null)
const map = ref(null)

// 初始化地图
onMounted(() => {
  // 创建底图图层
  const baseLayer = new TileLayer({
    source: new XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
      crossOrigin: 'anonymous'
    })
  })
  
  
  // 初始化地图
  map.value = new Map({
    target: mapRef.value,
    layers: [baseLayer],
    view: new View({
      center: [104, 35], // 地图中心坐标（经度，纬度）- 设置为中国中心
      zoom: 5,         // 初始缩放级别
      projection: 'EPSG:4326' // 使用WGS84坐标系
    })
  })
})

// 销毁地图实例
onUnmounted(() => {
  if (map.value) {
    map.value.setTarget(null)
    map.value = null
  }
})
</script>

<template>
  <div class="basic-map-container">
    <h2>基础地图</h2>
    <p>这是一个使用OpenLayers的基础地图演示</p>
    
    <!-- 地图容器 -->
    <div class="map-wrapper">
      <div id="map" ref="mapRef" class="map"></div>
    </div>
    
    <div class="map-info">
      <p>当前投影: EPSG:4326 (WGS84)</p>
      <p>底图: 高德地图</p>
    </div>
  </div>
</template>

<style scoped>
.basic-map-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: 100%;
}

.map-wrapper {
  width: 100%;
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

.map-info {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

h2 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

p {
  color: #6c757d;
  margin: 0.5rem 0;
}
</style>